<!DOCTYPE HTML>

<html>
	<head>
		<link rel="shortcut icon" href="https://monkeyhbd.gitee.io/image/mokey-land.png">
		<!-- Welcome to visit monkeyhbd.gitee.io. -->
		<title>领航 | Monkeyhbd</title>
		<meta name="viewport" content="width=device-width initial-scale=1">
		<meta charset="utf-8">
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<style>
			body {
				font-family: sans-serif;
				margin: 0;
				background-color: black;
			}

			.body-center {
				max-width: 1200px;
				margin: 0 auto;
			}

			.default-picture {
				content: url('./image/default.jpeg');
				width: 100%;
				background-size: contain;
			}

			.top-section .default-picture {
				width: auto;
			}

			header {
				display: flex;
				position: relative;
				height: 120px;
				background-color: black;
				color: white;
			}

			#logo-container {
				display: flex;
				width: 240px;
				height: 100%;
				justify-content: center;
				align-items: center;
			}

			#logo-wrapper {
				height: 60%;
			}

			#logo-wrapper img {
				height: 100%;
			}

			#menu-container {
				position: absolute;
				right: 0;
				display: flex;
				height: 100%;
			}

			.nav-item-wrapper {
				position: relative;
			}

			.nav-item-wrapper a {
				display: inline-block;
				margin: 0 20px;
				font-size: 18px;
				text-decoration: none;
				color: #c8c8c8;
				transition: all 0.5s;
				line-height: 180px;
			}
			
			.nav-item-wrapper:hover {
				background-color: white;
			}

			.nav-item-wrapper:hover a {
				color: black;
			}

			.active-wrapper {
				background-color: white;
			}

			.active-wrapper a {
				color: black;
			}

			.body-center > section {
				display: flex;
			}

			.studio-item1 {
				width: 50%;
				height: 650px;
				background-color: #a90000;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.studio-head > p {
				width: 100%;
				height: 20px;
				margin-bottom: 1em;
				margin-left: 50px;
				font-size: 2.5em;
				font-weight: 530;
				color: #fff;
			}

			.studio-head-1 > p {
				font-size: .875em;
				font-weight: 500;
				margin: 30px 50px;
				color: #fff;
				line-height: 25px;
			}

			.studio-head-2 > p {
				margin: 30px 50px;
				line-height: 25px;
				font-family: Avenir LT w01Heavy,sans-serif;
				font-size: .875em;
				font-weight: 500;
				color: #a5a5a5;
			}

			.studio-head-3 > p {
				width: 100%;
				height: 20px;
				margin-left: 50px;
				font-weight: 530;
				font-size: 20px;
				color: #890b0a;
			}

			.studio-item2 {
				display: flex;
				width: 50%;
				height: 650px;
				overflow: hidden;
				justify-content: center;
			}

			.studio-item3 {
				width: 600px;
				height: 350px;
				background-color: #000;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				cursor: pointer;
				position: relative;
			}

			.studio-item4 {
				width: 600px;
				height: 350px;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.hover-black {
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: black;
				opacity: 0;
				transition: all 0.5s;
			}

			.item3-btn {
				width: 150px;
				height: 50px;
				border: 3px solid #fff;
				position: absolute;
				display: none;
				justify-content: center;
				align-items: center;
				font-size: 17px;
				color: #fff;
				font-weight: 500;
			}
		</style>
		<script>
			$(document).ready(function() {
				$('.studio-item3').mouseenter(function() {
					$(this).children('.item3-btn').css('display', 'flex');
					$(this).children('.hover-black').css('opacity', '0.5');
				});
				$('.studio-item3').mouseleave(function() {
					$(this).children('.item3-btn').css('display', 'none');
					$(this).children('.hover-black').css('opacity', '0.0');
				});
			});
		</script>
	</head>
	<body>
		<div class="body-center">
			<header>
				<div id="logo-container">
					<div id="logo-wrapper">
						<img src="./image/logo.png">
					</div>
				</div>
				<div id="menu-container">
					<div class="nav-item-wrapper active-wrapper">
						<a href="">
							工作室
						</a>
					</div>
					<div class="nav-item-wrapper">
						<a href="">
							最新
						</a>
					</div>
					<div class="nav-item-wrapper">
						<a href="">
							武科大助手
						</a>
					</div>
					<div class="nav-item-wrapper">
						<a href="">
							成员作品
						</a>
					</div>
					<div class="nav-item-wrapper">
						<a href="">
							加入我们
						</a>
					</div>
				</div>
			</header>
			<section class="top-section">
				<div class="studio-item1">
					<div class="studio-head">
						<p>武汉科技大学</p>
						<p>领航工作室</p>
						<p>LINGHANG STUDIO</p>
					</div>
					<div class="studio-head-1">
						<p>领航工作室是一支致力于开发各类互联网应用系统和应用软件， 并兼顾网络安全， 程序设计，web开发，计算机维护等业务的技术团队， 领航工作室成立于2010年11月，是武汉科技大学技术支持较为雄厚的学生团体， 经过培训与运作，现已小有规模，工作室共分为三大开发团队：后台(Java)、Android、前端， 能够为武汉科技大学各单位提供不同平台不同需求的桌面应用的开发、web应用系统的开发，网站的设计与制作等等。</p>
					</div>
				</div>
				<div class="studio-item2">
					<img class="default-picture">
				</div>
			</section>
			<section>
				<div class="studio-item3">
					<img class="default-picture">
					<div class="hover-black"></div>
					<div class="item3-btn">
						<span>了解更多</span>
					</div>
				</div>
				<div class="studio-item4">
					<div class="studio-head-3">
						<p>后端组（Java）</p>
					</div>
					<div class="studio-head-2">
						<p>JAVA 是一门面向对象编程语言， 全球编程语言流行榜第一名。 Java不仅吸收了C++语言的各种优点， 还摒弃了C++里难以理解的多继承、指针等概念， 因此Java语言具有功能强大和简单易用两个特征。 领航工作室Java组致力于在Java的基础上进行的Java EE开发， 曾开发过领航工作室的官网和学校的活动报名系统等后台系统，并为武科大助手提供后端技术服务 具有强硬的实力和惊人的团队协作能力。</p>
					</div>
				</div>
			</section>
			<section>
				<div class="studio-item4">
					<div class="studio-head-3">
						<p>前端组</p>
					</div>
					<div class="studio-head-2">
						<p>前端开发，是进几年兴起的热门技术， 入门快，零基础也可以在短暂时间内上手。 前端是网页开发的核心，但也有能力开发移动端，写小程序，写桌面软件等等。 新技术的发展趋势可以让你上手制作属于自己的移动端app， 前端组也携手安卓组进行混合开发，开发了武科大助手许多功能。 互联网每天都有无数个新的网页产生，更多的就业机会，不一样的代码世界，现在加入，一起创造更多可能！</p>
					</div>
				</div>
				<div class="studio-item3">
					<img class="default-picture">
					<div class="hover-black"></div>
					<div class="item3-btn">
						<span>了解更多</span>
					</div>
				</div>
			</section>
			<section>
				<div class="studio-item3">
					<img class="default-picture">
					<div class="hover-black"></div>
					<div class="item3-btn">
						<span>了解更多</span>
					</div>
				</div>
				<div class="studio-item4">
					<div class="studio-head-3">
						<p>安卓组</p>
					</div>
					<div class="studio-head-2">
						<p>Android是全球最热门的移动设备操作系统， 是以手机APP开发为主要对象， 包括但不限于手机操作系统，手机游戏，手机其他多种功能的开发和优化。 所需要掌握的基础开发语言为Java。 Android组自领航工作室创立以来就一直是领航工作室重要的组成部分之一， 开发了许多像“武科大助手”、“日程快”等已经上线运行的APP， 我们会一直为领航工作室开创更广阔的未来。</p>
					</div>
				</div>
			</section>
		</div>
	</body>
</html>
